<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      img {
        display: block;
      }

      .box {
        width: 400px;
        height: 400px;
        margin: 50px;
        position: relative;
      }

      .box > .show {
        width: 400px;
        height: 400px;
        border: 1px solid #333;
        position: relative;
      }
      .box > .show > img {
        width: 400px;
        height: 400px;
      }
      .mask {
        width: 200px;
        height: 200px;
        background-color: yellow;
        opacity: 0.4;
        left: 0;
        top: 0;
        display: none;
        position: absolute;
      }

      .box > .list {
        width: auto;
        flex: 1;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        padding: 10px;
      }

      .box > .list > p {
        width: 54px;
        height: 54px;
        padding: 10px;
        margin: 2px;
      }
      .box > .list > p:nth-child(1) {
        width: 54px;
        height: 54px;
        border: 1px solid palevioletred;
      }

      .box > .enlarge {
        width: 400px;
        height: 400px;
        position: absolute;
        top: 0px;
        left: 101%;
        background-position: 0 0;
        background: url(./imgs/1.big.jpg) no-repeat;
        background-size: 800px 800px;
        display: none;
      }
      .box > .enlarge > img {
        width: 800px;
        height: 800px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="show">
        <img src="./imgs/1.jpg" alt="" />
        <div class="mask"></div>
      </div>
      <div class="list">
        <p>
          <img src="./imgs/1.small.jpg" alt="" />
        </p>
        <p>
          <img src="./imgs/2.small.jpg" alt="" />
        </p>
      </div>
      <div class="enlarge"></div>
    </div>
    <script>
      function $(ele) {
        return document.querySelector(ele);
      }
      function $all(ele) {
        return document.querySelectorAll(ele);
      }

      function Myfdj(img, simg, bimg) {
        this.img = img;
        this.smallimg = simg;
        this.bigimg = bimg;
      }
      Myfdj.prototype.changeimg = function () {
        $(
          ".show"
        ).innerHTML = `<img src="./imgs/${this.img}" alt="" /> <div class="mask"></div>`;
        $(".enlarge").style.background = `url(./imgs/${this.bigimg}) no-repeat`;
      };
      Myfdj.prototype.moveimg = function () {
        $(".show").addEventListener("mousemove", function (e) {
          $(".mask").style.display = "block";
          $(".mask").style.zIndex = 1;
          var numx = parseInt(e.clientX) - 150; //每次进来mask都覆盖在show上 所以获取相对浏览器视口的坐标
          var numy = parseInt(e.clientY) - 150;
          $(".mask").style.left = `${numx}px`;
          $(".mask").style.top = `${numy}px`;
          $(".enlarge").style.display = "block";
          $(".enlarge").style.backgroundPosition = `-${2 * numx}px -${
            2 * numy
          }px`;
          if (numx > 300 || numx < -100 || numy > 300 || numy < -100) {
            $(".mask").style.display = "none";
            $(".enlarge").style.display = "none";
          }
        });
      };
      var obj1 = new Myfdj("1.jpg", "1.small.jpg", "1.big.jpg");
      obj1.moveimg();
      var data = [];
      data.push(obj1);
      data.push(new Myfdj("2.jpg", "2.small.jpg", "2.big.jpg"));
      console.log(data);
      $all(".list p").forEach((item, i) => {
        item.onclick = function () {
          $all(".list p").forEach(function (item, k) {
            if (i == k) {
              item.style.border = "1px solid palevioletred";
            } else {
              item.style.border = "1px solid white";
            }
          });
          data[i].changeimg();
          data[i].moveimg();
        };
      });
    </script>
  </body>
</html>
